<template>
  <div>
       <el-header class="top_button">
      <div class="left-panel">
         <el-button type="success" plain>添加</el-button>
      <el-button type="primary" plain>修改</el-button>
      <el-button type="danger" plain>批量删除</el-button>
      <el-button type="warning" plain>导出</el-button>
      </div>
      <div class="right-panel">
        <div class="right-panel-search">
          <div class="mt-4">
            <el-input placeholder="查询内容" class="input-with-select">
              <template #prepend>
                <el-select
                  v-model="selectField"
                  placeholder="查询类型"
                  style="width: 115px"
                >
                  <el-option label="征兵年度" value="征兵年度" />
                  <el-option label="征兵批次" value="征兵批次" />
                  <el-option label="兵种名称" value="兵种名称" />
                </el-select>
              </template>
              <template #append>
                <el-button
                  type="primary"
                  plain
                  icon="el-icon-search"
                ></el-button>
              </template>
            </el-input>
          </div>

          <el-button type="primary" plain @click="searchVisible = true"
            >高级查询</el-button
          >
        </div>
      </div>
    </el-header>
    <MyTable :columns="columns" ref="tableRef" :data="allList">
      <el-table-column type="selection" width="55" />
      <el-table-column
        label="征兵年度"
        prop="conscriptionYear"
        v-if="columns[0].show"
        show-overflow-tooltip
      />
      <el-table-column
        label="征兵批次"
        prop="conscriptionBatches"
        width="200"
        v-if="columns[1].show"
        show-overflow-tooltip
      />
      <el-table-column
        label="兵种名称"
        prop="soldierInfoName"
        v-if="columns[2].show"
        show-overflow-tooltip
      />
      <el-table-column fixed="right" label="操作" width="240">
        <template #default>
          <el-button type="text" size="small">编辑</el-button>
          <el-button type="text" size="small" style="color: red">删除</el-button>
        </template>
      </el-table-column>
    </MyTable>
    <!-- 分页区开始 -->
    <div class="page">
      <el-pagination
        v-model:currentPage="pageInfo.pageNum"
        v-model:page-size="pageInfo.pageSize"
        :page-sizes="[10, 15, 20]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 分页区结束 -->
  </div>
</template>

<script>
import { defineComponent, reactive, toRefs, onMounted } from "vue";
import { getmaterialListInfo } from "@/api/publicData/materialList";

export default defineComponent({
  name: "materialList",
  setup() {
    //   类似vue2的data
    const state = reactive({
      // 高级查询
      fiexdSearchForm: false,
      columns: [
        { name: "征兵年度", show: true, prop: "conscriptionYear" },
        { name: "征兵批次", show: true, prop: "conscriptionBatches" },
        { name: "兵种名称", show: true, prop: "soldierInfoName" },
      ],
      allList: [],
      pageInfo: {
        pageNum: 1,
        pageSize: 10,
      },
      total: 1,
    });
    onMounted(() => {
      Methods.getmaterialList();
    });
    const Methods = {
      // 分页获取应征人员
      async getmaterialList() {
        var res = await getmaterialListInfo.get(state.pageInfo);
        console.log(res);
        if (res.code === 200) {
          state.allList = res.data.result;

          state.total = res.data.total;
        }
      },
      // 编辑表单开始结束  后面改
      changeColumn(columns) {
        this.columns = columns;
        // this.$refs.table.doLayout()
      },
      // 条数
      handleSizeChange() {
        Methods.getmaterialList();
      },
      // 页数
      handleCurrentChange() {
        Methods.getmaterialList();
      },
    };
    return {
      ...toRefs(state),
      ...Methods,
    };
  },
});
</script>

<style scoped>
.form-closex {
  display: flex;
}
.el-pagination {
  margin-top: 10px;
  align-items: center;
  justify-content: center;
}
.top_button {
  display: flex;
  justify-content: space-between;
}
.bottom-btn {
  margin-top: 10px;
  margin-left: 28px;
}
</style>